<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //key是指键盘字符
        //keyCode是指键盘字符代码
        //获取input1
        var input1=document.getElementById("input1");
        //键盘事件
        //onkeydown 按键被按下
        //对于onkeydown来说 如果一直按着某个按键不松手，则事件会被一直触发
        //当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快
        //防止误操作的发生
        //onkeyup 按键被松开 但他不会被连续触发，只能一次一次触发
        //键盘事件一般都会绑定给一些可以获取到焦点的对象（也就是可以获取光标的对象）或者是document

        //如何知道键盘敲击的是什么字符？需要使用event
        document.onkeydown=function(event)
        {
            //console.log("按键被按下了");
            //console.log(event.keyCode);
            /*
            if(event.keyCode === 89)
            {
                console.log("y被按下了");
            }
            */
            //除了keyCode，事件对象中还提供了几个属性
            //altKey ctrlKey shiftKey
            //这三个用来判断alt ctrl shift是否同时被按下
            if(event.keyCode === 89 && event.ctrlKey)
            {
                //console.log("ctrl和y都被按下了");
            }
        };
        document.onkeyup=function(event)
        {
            //console.log("按键被松开了");
        };

        //给input1绑定键盘事件
        input1.onkeydown=function(event)
        {
            //console.log(event.keyCode);
            //如果增加return false
            //那么文本框将无法输入字符，但是控制台依旧会显示字符的keyCode码
            //在文本框输入内容，属于onkeydown的默认行为
            //如果再onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
            //return false;

            //如何使文本框中不能输入数字
            //数字值在48-57和96-105之间
            /*
            if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105))
            {
                console.log("无法输入数字");
                return false;
            }
            */
        };
    };
    </script>
</head>
<body>
    <!--<div id="box1"></div>-->
    文本框<input type="text" id="input1">
</body>
</html>